import React, { Component } from 'react'
import { connect } from 'react-redux';
import { deleteExperience } from '../../actions/profileActions';

// 个人履历组件
class Experience extends Component {
  onDeleteClick = (id) => {
    this.props.deleteExperience(id)
  }
  render () {
    // 获取父级传来的履历信息
    const experience = this.props.experience.map(exp => {
      return (
        <tr key={exp._id}>
          <td>{exp.company}</td>
          <td>{exp.title}</td>
          <td>
            {exp.from} 至 {exp.to === '' ? '至今' : exp.to}
          </td>
          <td>
            <button
              onClick={() => { this.onDeleteClick(exp._id) }}
              className="btn btn-danger"
            >
              删除
          </button>
          </td>
        </tr >
      )
    }
    )
    return (
      <div>
        {
          this.props.experience.length > 0 ?

            <div>

              <h4 className="mb-4">个人履历</h4>
              <table className="table">
                <thead>
                  <tr>
                    <th>公司</th>
                    <th>职位</th>
                    <th>年份</th>
                    <th>操作</th>
                  </tr>
                  {experience}
                </thead>
              </table>
            </div> : null
        }
      </div >
    )
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    // 删除当前履历
    deleteExperience: (id) => {
      dispatch(deleteExperience(id))
    }
  }

}
export default connect(null, mapDispatchToProps)(Experience)